@import url(http://fonts.googleapis.com/css?family=Inconsolata);
/*@import url(http://fonts.googleapis.com/css?family=Sarina);*/
@charset "UTF-8";
/* CSS Document */
* {
    margin:0;
    padding:0;
  }

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* THE CHECKBOCK HACK WAS BROKEN IN IOS 9.1----!!!--BUT THIS BODY CSS FIXES IT :) yesss */
/*http://codepen.io/TimPietrusky/pen/fHmiI*/
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { 
from {padding:0;} to {padding:0;} 
}
/* ---------------------SCROLL INDICATOR ARROW BEGIN -------------- */
.arrowRight {
	font-size: 14px;
	margin: 0%;
	padding: 0px;
	/*background-color: rgba(0,51,204,.1); --Nice twee blue, matches the labels :P */
	animation: rightarrowmover 1.5s ease infinite, rightarrowopacity 1.5s linear infinite, rightarrowcolor 1.5s linear infinite;
	-webkit-animation: rightarrowmover 1.5s ease infinite, rightarrowopacity 1.5s linear infinite, rightarrowcolor 1.5s linear infinite;
	}
	
@keyframes rightarrowmover{
	0% {transform: translate(0px, 0px);}
	10% {transform: translate(0px, 0px);}
	100% {transform: translate(40px, 0px);}
	}
@-webkit-keyframes rightarrowmover{
	0% {-webkit-transform: translate(0px, 0px);}
	10% {-webkit-transform: translate(0px, 0px);}
	100% {-webkit-transform: translate(40px, 0px);}
	}	
@keyframes rightarrowopacity{
	0% {opacity: 0;}
	9% {opacity: 0;}
	10% {opacity: 1;}
	80% {opacity: 1;}
	100% {opacity: 0;}
	}
@-webkit-keyframes rightarrowopacity{
	0% {opacity: 0;}
	9% {opacity: 0;}
	10% {opacity: 1;}
	80% {opacity: 1;}
	100% {opacity: 0;}
	}
@keyframes rightarrowcolor{
	0% {color: #000;}
	100% {color:#00CC00;}
	}
@-webkit-keyframes rightarrowcolor{
	0% {color: #000;}
	100% {color:#00CC00;}
	}
/* ---------------------SCROLL INDICATOR ARROW END -------------- */


html { font-size: 75%; // 12px }
@media only screen and (max-device-width: 480px) {
	html { font-size: 200%; // 16px }
}

/*/////////below from forms-adobe site/////////////*/

	
.joke{
	width: 400px; /*was 145*/
	border: 0px;
	margin: 0px; /*I hadn't originally set a margin for these menus until 6/15..not sure why I didn't.*/
	padding: 2px;
	text-align: left;
	position:fixed;
	height: 100vh;
	overflow: auto;
	z-index: 1000;
}
.joke-sidemenu{
    width: 200px;
	border: 0px;
	margin: 0px;
	padding: 46px 2px 2px 405px; /*clockwise from noon*/
	text-align: left;
	position:fixed;
	height: 100vh;
	overflow: auto;
	z-index: 1000;

}
.fool a.foolish  {
	
   /*font-family: 'Norican', cursive;*/
	font-family: 'Sarina', cursive;
	/*font-family: 'Abril Fatface', cursive;*/
	/*font-family: 'Elsie', cursive;*/
	/*font-family: 'Libre Baskerville', serif;*/
	/*font-family: 'Open Sans', sans-serif;*/
	padding: 0px; /*padding doesn't seem to control a lot here, only when it goes above zero it gets fat, but I can't seem to get left and right to react.*/
	line-height: 26px; /* line height sets the spacing between the labels, padding doesn't effect it.*/
	margin-top: auto; /*this rule, margin-top: auto; seems really important*/
	
	z-index: 999;
	background: rgba(102,102,102,.5); /*rgba color provides opacity: a is for alpha, .5 is half opaque.*/
	
	cursor: pointer;
	color: rgba(255,255,255,.7);
	font-size: 2.5em;
	text-decoration: none;
	}
	

a.foolish:visited {
	text-decoration: none;
	color: rgba(255,255,255,.7);
	}
a.foolish:hover {
	color:#009;
	}
	
	
.joke label {
	/*font-family: Arial, Helvetica, sans-serif;*/
	/*font-family: 'Roboto', sans-serif;*/
	/*font-family: 'Lato', sans-serif;*/
	/*font-family: 'Raleway', sans-serif;*/
	/*font-weight: 300;*/
	/*font-family: "Lucida Console", Monaco, monospace;*/
	/*font-family: 'Libre Baskerville', serif;*/
	/*letter-spacing: 1px;*/
	/*text-shadow: 1px 1px 1px #999999;*/
	font-family: 'Inconsolata' ;
	font-weight: 400;
	padding: 0px;
	line-height: 20px; /* line height sets the spacing between the labels, padding doesn't effect it.*/
	margin-top: auto; /*this rule, margin-top: auto; seems really important*/
	text-decoration: none;
	z-index: 20;
	background: #03C;
	cursor: pointer;
	color: rgba(255,255,255,.9);
	font-size: 3em;
}

a.linkitem {
	/*font-family: Arial, Helvetica, sans-serif;*/
	/*font-family: 'Roboto', sans-serif;*/
	/*font-family: 'Lato', sans-serif;*/
	/*font-family: 'Raleway', sans-serif;*/
	/*font-weight: 300;*/
	/*font-family: "Lucida Console", Monaco, monospace;*/
	/*font-family: 'Libre Baskerville', serif;*/
	/*letter-spacing: 1px;*/
	/*text-shadow: 1px 1px 1px #999999;*/
	font-family: 'Inconsolata' ;
	font-weight: 400;
	padding: 0px;
	line-height: 20px; /* line height sets the spacing between the labels, padding doesn't effect it.*/
	margin-top: auto; /*this rule, margin-top: auto; seems really important*/
	text-decoration: none;
	z-index: 20;
	background: #03C;
	cursor: pointer;
	color: rgba(255,255,255,.9);
	
}

/*.joke label a.linkitem {
	text-decoration:none;
	padding: 0px;
	color: #ffffff;
	background: #03C;
	}*/



.joke label:hover, a.linkitem:hover {
	background: #666;
}

.joke input:checked + label,
.joke input:checked + label:hover,
.joke input:checked + label a.linkitem, 
.joke input:checked + label a.linkitem:hover
{
	background: #000;
	color: #FFF;

}
.joke input{
	display: none;
}
.joke article{
	
	margin-top: -1px;
	overflow: hidden;
	/* overflow controls whether there is a scrollbar or not. :auto makes a scrollbar. 
	:hidden keeps it to a set height. */
	height: 0px;
	/*position: relative;*/
	/*z-index: 10;
	-webkit-transition: height 0.3s ease-in-out;
	-moz-transition: height 0.1s ease-in-out;
	-o-transition: height 0.3s ease-in-out  /*box-shadow 0.6s linear;
	-ms-transition: height 0.3s ease-in-out /*box-shadow 0.6s linear;
	transition: height 0.1s ease-in-out /*box-shadow 0.6s linear;*/


}
.joke article li{
	
	font-family: 'Inconsolata' ;
	/*font-style: italic;*/
	letter-spacing: 0px;
	text-align: left;
	margin-top: 2px;
	line-height: 17px;
	
	background-color: rgba(255,255,255,.9);
	
	/* background-color: #FFF; makes a nice white bar the width of the article*/
	font-size: 3em;
	/* UNNEEDED BUT NEAT:  text-shadow: 1px 1px 1px rgba(255,255,255,0.8); */
}
.joke article li a {
	color: #0000EE;
}
.joke article li a:active {
	color: #EE0000;	
}
.joke article li a:visited {
	color: #6633CC;
} 
.joke article li a:hover {
	color: #333;
}

/* ***************SIDE MENU STYLES*********/
.joke-sidemenu li{
	
	font-family: 'Inconsolata' ;
	font-style: italic;
	letter-spacing: 0px;
	text-align: left;
	margin-top: 2px;
	line-height: 17px;
	
	background-color: rgba(241,241,241,.9);
	
	/* background-color: #FFF; makes a nice white bar the width of the article*/
	font-size: 2em;
	/* UNNEEDED BUT NEAT:  text-shadow: 1px 1px 1px rgba(255,255,255,0.8); */
}
.joke-sidemenu li a {
	color: #0000EE;
}
.joke-sidemenu li a:active {
	color: #EE0000;	
}
.joke-sidemenu li a:visited {
	color: #6633CC;
} 
.joke-sidemenu li a:hover {
	color: #333;
}
/* ************END SIDE MENU STYLE *******/

a.skinner{
	/*text-decoration:none; a way to get rid of link underline in li a's*/
	}
	
/*a.linkitem {
	text-decoration:none;
	color: #fff;
	
	padding: 0px;
	line-height: 20px; line height sets the spacing between the labels, padding doesn't effect it.*/
	/*margin-top: auto;
	
	}*/
	
.joke article span.lick{
	background-color:#9F3;
	}

/*.joke input:checked ~ article{
	-webkit-transition: height 0.3s ease-in-out;
	-moz-transition: height 0.1s ease-in-out;
	-o-transition: height 0.3s ease-in-out /*box-shadow 0.6s linear;
	/*-ms-transition: height 0.3s ease-in-out /*box-shadow 0.6s linear;
	transition: height 0.1s ease-in-out /*box-shadow 0.6s linear;

}*/

/*THE FOLLOWING RULES SET SPECIFIC MENU-ARTICLE HEIGHTS. 20 px for each list item, plus an extra 2px for good measure at bottom. */
.joke input:checked ~ article.ac-2D{
	height: auto;/*122px;*/
}
.joke input:checked ~ article.ac-3D{
	height: auto;/*82px;*/
}

.joke input:checked ~ article.ac-COMPUTER{
	height: auto;/*82px;*/
	/*height: auto; HEIGHT AUTO SEEMS TO WORK!! BUT IT KILLS THE TRANSITIONS??? */
}
.joke input:checked ~ article.ac-ABOUT{
	height: auto; /*102px*/
}



#currentpage a {
	background-color: #FFFF33;
	color: #000;
}

.pagelinks a {
	background-color:#FFF;
	color: #000;
	}